<template>
	<view>
		<view @touchmove.stop.prevent="clear"  class="model-container alertcontainers model-animation" :class="[visible?'model_show':'model_hidden']">
			<view class="model-contents">
				<view class="header">
					<view class="wx-img" :style="{'background-image':'url('+levelbgimg+')'}">
						<image :src="userdata.avatar" mode="aspectFill"></image>
					</view>
				</view>
				<view class="mode-info">
					<slot></slot>
				</view>
			</view>
			<view class="close-botton" @click="closetip">
				<image src="/static/image/closeicon.png" mode="aspectFill"></image>
			</view>
		</view>
		<!--遮罩层-->
		<view class="model-mask-bgcolor mask-bgcolor model-animation" :class="[visible?'model-bg-show':'model-bg-hidden']"></view>
	</view>
</template>

<script>
	export default {
		props: {
			levelbgimg:{
				type:String,
				default:'',
			},
			visible: {
				type: Boolean,
				default: false
			},
			modeltitle: {
				type: String,
				default: '提示' 
			},
			//开启和关闭按钮
			isclosebutton:{
				type: Boolean,
				default: true,
			},
			userdata:{
				type:Object,
				default:{}
			}
		},
		methods:{
			closetip(){
				uni.$emit('closewindown',false);
			},
			clear(){
				
			}
		}
	}
</script>

<style lang="scss">
	
	.model-titls{
		font-size: 42rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		height: 90rpx;
	}
	.model-container,
	.model-mask-bgcolor {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		font-size: 32rpx;
	}

	//动画开始
	.model-animation {
		transition: all 0.3s ease-in-out;
		transition-timing-function:cubic-bezier(.5,.49,.57,1.41) 
	}

	//背景隐藏
	.mask-bgcolor {
		background-color: #000;
		z-index: 999;
	}

	.model-bg-show {
		visibility: visible;
		opacity: 0.5
	}

	.model-bg-hidden {
		visibility: hidden;
		opacity: 0
	}

	.alertcontainers {
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		flex-direction: column;
	}

	.model-contents {
		background-color: #fff;
		width: 80%;
		border-radius: 45rpx;
		display: flex;
		flex-direction: column;
		
		padding-top:0 ;
		.header{
			background-image: url('/static/image/recharge_alert.png');
			display:flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 258rpx;
			background-size: 100% 100%;
			.wx-img{
				display:flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				// background-image:url('/static/image/baiyin.png');
				background-repeat: no-repeat;
				background-position: center;
				background-size: 200rpx 223rpx;
				width: 220rpx;
				height: 245rpx;
	
				image{
					border: 1rpx solid #fff;
					width: 135rpx;
					height: 135rpx;
					border-radius: 50%;
				}
			}
		}
	}
	.close-botton{
		width: 100%;
		height: 220rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0.8;
		image{
			width: 80rpx;
			height: 80rpx;
		}
	}
	.mode-info {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #494949;
	}

	.model_show {
		visibility: visible;
		transform: scale(1);

	}

	.model_hidden {
		visibility: hidden;
		transform: scale(0);
		opacity:0
	}
</style>
